
<div title="Back to My Profile" id="backlink">
  <p>
    <a class="alertLink" href="<?php echo FRONT_SITE_URL; ?>user/profile">Back to My Profile</a>
  </p>
  <a href="<?php echo FRONT_SITE_URL; ?>user/profile"><img border="0" src="<?php echo FRONT_SITE_URL ?>www/images/images1/backarrow.png"></a>
</div>
<div id="PopBlockNotification" style="display: none; background-color: yellow; font-size: 9pt; text-align: center; padding: 3px; margin-bottom: 4px;">
  <div style="width: 760px;">
    <table cellspacing="0" cellpadding="3" border="0" align="center">
      <tbody><tr>
          <td>
            <img alt="!" src="<?php echo FRONT_SITE_URL ?>www/images/images1/animatedexclamation.gif">
          </td>
          <td align="center">
            Your popup blocker stopped you from chatting with a member. <a onclick="popNewICWindow();" href="javascript:void(0);">click here</a> to open the window<br>
            <a href="#help">Click here</a> to learn how to disable your popup blocker on BBPeopleMeet.com
          </td>
          <td>
            <img alt="!" src="<?php echo FRONT_SITE_URL ?>www/images/images1/animatedexclamation.gif">
          </td>
        </tr>
      </tbody></table>
  </div>
</div>


<div class="expirationtext" id="columnleft">

  <div class="editinterestsarea bgcolor-main">
    <div class="editinterestsareatop">
      <h1>My Interests</h1>
      <p>What are you passionate about? Pick 3 interests and tell us why!</p>
    </div>
    <div class="editinterestsareamiddle">
      <?php $interests = CONSTANT::getInterestsArray(); 
      $interestsName = CONSTANT::getInterestsNameArray(); 
      ?>
      <?php if($model['interestImg1'] != '' && $model['interestImg1'] != 0){ ?>
        <div index="1" class="interest1col" interest-id="<?php echo $model['interestImg1']; ?>">
          <div class="interest1area">
            <div class="closebtn1place" style="display: block;">
              <div title="Remove Interest" class="closebtn1 closebtn">
                <img width="23" height="23" src="<?php echo FRONT_SITE_URL ?>www/images/images1/largeclosebtn.png">
              </div>
            </div>
            <img class="interest1areaimg border-color-main intereston" src="<?php echo FRONT_SITE_URL ?>www/images/images1/<?php echo $interests[$model['interestImg1']]; ?>">
            <p class="interest1title color-alt"><?php echo $interestsName[$model['interestImg1']]; ?></p>
          </div>
          <div class="interest1caption interestentry" style="display: block;">
            <textarea class="textinterest1 unselected" rows="" cols="" name=""><?php echo $model['interestText1']; ?></textarea>
            <p class="remainingcharacters">Characters Remaining: <span>500</span></p>
          </div>
        </div>
      <?php }else{ ?>
        <div index="1" class="interest1col">
          <div class="interest1area">
            <div class="closebtn1place" style="display: none;">
              <div title="Remove Interest" class="closebtn1 closebtn">
                <img width="23" height="23" src="<?php echo FRONT_SITE_URL ?>www/images/images1/largeclosebtn.png">
              </div>
            </div>
            <img class="interest1areaimg border-color-main interestoff" src="<?php echo FRONT_SITE_URL ?>www/images/images1/empty.jpg">
            <p class="interest1title color-alt">Interest 1</p>
          </div>
          <div class="interest1caption interestentry" style="display: none;">
            <textarea class="textinterest1 unselected" rows="" cols="" name="">What do you like about this and why?</textarea>
            <p class="remainingcharacters">Characters Remaining: <span>500</span></p>
          </div>
        </div>
      <?php } ?>
      <?php if($model['interestImg2'] != '' && $model['interestImg2'] != 0){ ?>
        <div index="2" class="interest2col" interest-id="<?php echo $model['interestImg2']; ?>">
          <div class="interest2area">
            <div class="closebtn2place" style="display: block;">
              <div title="Remove Interest" class="closebtn2 closebtn">
                <img width="23" height="23" src="<?php echo FRONT_SITE_URL ?>www/images/images1/largeclosebtn.png">
              </div>
            </div>
            <img class="interest2areaimg border-color-main  intereston" src="<?php echo FRONT_SITE_URL ?>www/images/images1/<?php echo $interests[$model['interestImg2']]; ?>">
            <p class="interest2title color-alt"><?php echo $interestsName[$model['interestImg2']]; ?></p>
          </div>
          <div class="interest2caption interestentry" style="display: block;">
            <textarea class="textinterest2 unselected" rows="" cols="" name=""><?php echo $model['interestText2']; ?></textarea>
            <p class="remainingcharacters">Characters Remaining: <span>500</span></p>
          </div>
        </div>
      <?php }else{ ?>
      <div index="2" class="interest2col">
        <div class="interest2area">
          <div class="closebtn2place" style="display: none;">
            <div title="Remove Interest" class="closebtn2 closebtn">
              <img width="23" height="23" src="<?php echo FRONT_SITE_URL ?>www/images/images1/largeclosebtn.png">
            </div>
          </div>
          <img class="interest2areaimg border-color-main  interestoff" src="<?php echo FRONT_SITE_URL ?>www/images/images1/empty.jpg">
          <p class="interest2title color-alt">Interest 2</p>
        </div>
        <div class="interest2caption interestentry" style="display: none;">
          <textarea class="textinterest2 unselected" rows="" cols="" name="">What do you like about this and why?</textarea>
          <p class="remainingcharacters">Characters Remaining: <span>500</span></p>
        </div>
      </div>
      <?php } ?>
      <?php if($model['interestImg3'] != '' && $model['interestImg3'] != 0){ ?>
        <div index="3" class="interest3col" interest-id="<?php echo $model['interestImg3']; ?>">
        <div class="interest3area">
          <div class="closebtn3place" style="display: block;">
            <div title="Remove Interest" class="closebtn3 closebtn">
              <img width="23" height="23" src="<?php echo FRONT_SITE_URL ?>www/images/images1/largeclosebtn.png">
            </div>
          </div>
          <img class="interest3areaimg border-color-main  intereston" src="<?php echo FRONT_SITE_URL ?>www/images/images1/<?php echo $interests[$model['interestImg3']]; ?>">
          <p class="interest3title color-alt"><?php echo $interestsName[$model['interestImg1']]; ?></p>
        </div>
        <div class="interest3caption interestentry" style="display: block;">
          <textarea class="textinterest3 unselected" rows="" cols="" name=""><?php echo $model['interestText3']; ?></textarea>
          <p class="remainingcharacters">Characters Remaining: <span>500</span></p>
        </div>
      </div>
      <?php }else{ ?>
      <div index="3" class="interest3col">
        <div class="interest3area">
          <div class="closebtn3place" style="display: none;">
            <div title="Remove Interest" class="closebtn3 closebtn">
              <img width="23" height="23" src="<?php echo FRONT_SITE_URL ?>www/images/images1/largeclosebtn.png">
            </div>
          </div>
          <img class="interest3areaimg border-color-main  interestoff" src="<?php echo FRONT_SITE_URL ?>www/images/images1/empty.jpg">
          <p class="interest3title color-alt">Interest 3</p>
        </div>
        <div class="interest3caption interestentry" style="display: none;">
          <textarea class="textinterest3 unselected" rows="" cols="" name="">What do you like about this and why?</textarea>
          <p class="remainingcharacters">Characters Remaining: <span>500</span></p>
        </div>
      </div>
      <?php } ?>
      <p class="clearfix">&nbsp;</p>
      <div class="saveinterestbutton">
        <a title="Save My Interests" class="button_style" id="savebtn" href="javascript:;">Save My Interests</a>
      </div>
    </div>
    <div class="editinterestsareabottom">
      <div class="interestrowrepeat">
        <h2>Activities &amp; Hobbies</h2>
        <div style="<?php if(array_search('4', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="4" class="interestimage">
          <img class="crafts" src="<?php echo FRONT_SITE_URL ?>www/images/images1/crafts.jpg">
          <p class="color-alt">Crafts and Creating</p> </div>
        <div style="<?php if(array_search('7', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="7" class="interestimage">
          <img class="fitness" src="<?php echo FRONT_SITE_URL ?>www/images/images1/fitness.jpg">
          <p class="color-alt">Fitness</p> </div>
        <div style="<?php if(array_search('8', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="8" class="interestimage">
          <img class="games" src="<?php echo FRONT_SITE_URL ?>www/images/images1/games.jpg">
          <p class="color-alt">Games </p> </div>
        <div style="<?php if(array_search('12', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="12" class="interestimage">
          <img class="nature" src="<?php echo FRONT_SITE_URL ?>www/images/images1/nature.jpg">
          <p class="color-alt">Nature and Outdoors</p> </div>
        <div style="<?php if(array_search('17', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="17" class="interestimagelast">
          <img class="sports" src="<?php echo FRONT_SITE_URL ?>www/images/images1/sports.jpg">
          <p class="color-alt">Sports</p> </div>
      </div>
      <p class="clearfix">&nbsp;</p>
      <div class="interestrowrepeat">
        <h2>Culture &amp; Entertainment</h2>
        <div style="<?php if(array_search('1', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="1" class="interestimage">
          <img class="arts" src="<?php echo FRONT_SITE_URL ?>www/images/images1/arts.jpg">
          <p class="color-alt">Arts</p> </div>
        <div style="<?php if(array_search('10', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="10" class="interestimage">
          <img class="movies" src="<?php echo FRONT_SITE_URL ?>www/images/images1/movies.jpg">
          <p class="color-alt">Movies</p> </div>
        <div style="<?php if(array_search('11', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="11" class="interestimage">
          <img class="music" src="<?php echo FRONT_SITE_URL ?>www/images/images1/music.jpg">
          <p class="color-alt">Music</p> </div>
        <div style="<?php if(array_search('13', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="13" class="interestimage">
          <img class="news" src="<?php echo FRONT_SITE_URL ?>www/images/images1/news.jpg">
          <p class="color-alt">News and Politics</p> </div>
        <div style="<?php if(array_search('18', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="18" class="interestimagelast">
          <img class="technology" src="<?php echo FRONT_SITE_URL ?>www/images/images1/technology.jpg">
          <p class="color-alt">Technology</p> </div>
      </div>
      <p class="clearfix">&nbsp;</p>
      <div class="interestrowrepeat">
        <h2>Food &amp; Social</h2>
        <div style="<?php if(array_search('3', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="3" class="interestimage">
          <img class="cooking" src="<?php echo FRONT_SITE_URL ?>www/images/images1/cooking.jpg">
          <p class="color-alt">Cooking</p> </div>
        <div style="<?php if(array_search('9', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="9" class="interestimage">
          <img class="hosting" src="<?php echo FRONT_SITE_URL ?>www/images/images1/hosting.jpg">
          <p class="color-alt">Hosting</p> </div>
        <div style="<?php if(array_search('15', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="15" class="interestimage">
          <img class="restaurants" src="<?php echo FRONT_SITE_URL ?>www/images/images1/restaurants.jpg">
          <p class="color-alt">Restaurants</p> </div>
        <div style="<?php if(array_search('16', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="16" class="interestimage">
          <img class="shopping" src="<?php echo FRONT_SITE_URL ?>www/images/images1/shopping.jpg">
          <p class="color-alt">Shopping and Collecting</p> </div>
        <div style="<?php if(array_search('20', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="20" class="interestimagelast">
          <img class="wine" src="<?php echo FRONT_SITE_URL ?>www/images/images1/wine.jpg">
          <p class="color-alt">Wine Tasting and Spirits</p> </div>
      </div>
      <p class="clearfix">&nbsp;</p>
      <div class="interestrowrepeat">
        <h2>Life &amp; Spirit</h2>
        <div style="<?php if(array_search('2', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="2" class="interestimage">
          <img class="career" src="<?php echo FRONT_SITE_URL ?>www/images/images1/career.jpg">
          <p class="color-alt">Career</p> </div>
        <div style="<?php if(array_search('5', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="5" class="interestimage">
          <img class="education" src="<?php echo FRONT_SITE_URL ?>www/images/images1/education.jpg">
          <p class="color-alt">Education</p> </div>
        <div style="<?php if(array_search('6', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="6" class="interestimage">
          <img class="family" src="<?php echo FRONT_SITE_URL ?>www/images/images1/family.jpg">
          <p class="color-alt">Family and Friends</p> </div>
        <div style="<?php if(array_search('14', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="14" class="interestimage">
          <img class="religion" src="<?php echo FRONT_SITE_URL ?>www/images/images1/religion.jpg">
          <p class="color-alt">Religion and Spirituality</p> </div>
        <div style="<?php if(array_search('19', $data_interest_img) !== false) echo 'display:none'; ?>" interest-id="19" class="interestimagelast">
          <img class="travel" src="<?php echo FRONT_SITE_URL ?>www/images/images1/travel.jpg">
          <p class="color-alt">Travel</p> </div>
      </div>
      <p class="clearfix">&nbsp;</p>
    </div>
    <p class="clearfix">&nbsp;</p>
  </div>
</div>
<script>
  var $jq = jQuery.noConflict();
              var PeopleMedia = PeopleMedia || {};
              PeopleMedia.ChooseInterest = function() {
                var nextOpen = 1;
                if ($jq(".interest" + nextOpen + "areaimg").attr('src').indexOf("empty.jpg") == -1) {
                  nextOpen = 2;
                  if ($jq(".interest" + nextOpen + "areaimg").attr('src').indexOf("empty.jpg") == -1) {
                    nextOpen = 3;
                    if ($jq(".interest" + nextOpen + "areaimg").attr('src').indexOf("empty.jpg") == -1) {
                      return;
                    }
                  }
                }
                $jq(".interest" + nextOpen + "areaimg").attr('src', $jq(this).find('img').attr('src'));
                $jq(".interest" + nextOpen + "title").text($jq(this).find('p').html());
                $jq(".textinterest" + nextOpen).val('What do you like about this and why?');
                $jq(".interest" + nextOpen + "caption").find('.remainingcharacters span').html('500');
                $jq(".interest" + nextOpen + "areaimg").removeClass("interestoff");
                $jq(".interest" + nextOpen + "areaimg").addClass("intereston");
                $jq(".textinterest" + nextOpen).removeClass("unselected");
                $jq(".textinterest" + nextOpen).addClass("selected");
                $jq(".interest" + nextOpen + "caption").show();
                $jq(".closebtn" + nextOpen + "place").show();
                var interestid = $jq(this).attr("interest-id");
                $jq(this).hide();
                $jq(".interest" + nextOpen + "col").attr("interest-id", interestid);
              };
              $jq(document).ready(function() {
                var defaultInterestText = "What do you like about this and why?";
                $jq(".interestentry textarea").keyup(function() {
                  var limit = 500;
                  var text = $jq(this).val();
                  var chars = text.length;
                  if (chars > limit) {
                    var new_text = text.substr(0, limit);
                    $jq(this).val(new_text);
                  }
                  var remain = limit - chars;
                  if (remain < 0) {
                    remain = 0;
                  }

                  $jq(this).parent().find('.remainingcharacters span').html(remain);
                });
                $jq('[class^="textinterest"]').focus(function() {
                  if (this.value == defaultInterestText) {
                    $jq(this).val('');
                  }
                });
                $jq('[class^="textinterest"]').focusout(function() {
                  if (this.value == '') {
                    $jq(this).val(defaultInterestText);
                  }
                });
                // close document ready


                $jq('.interestimage, .interestimagelast').click(PeopleMedia.ChooseInterest);
                $jq('.closebtn').click(function() {
                  var parentdiv = $jq(this).parent().parent().parent();
                  var interestid = parentdiv.attr("interest-id");
                  parentdiv.removeAttr("interest-id");
                  var index = parentdiv.attr("index");
                  $jq(".interest" + index + "areaimg").attr('src', FRONT_SITE_URL+'www/images/images1/empty.jpg');
                  $jq(".interest" + index + "title").text("Interest " + index);
                  $jq(".textinterest" + index).text('What do you like about this and why?');
                  $jq(".interest" + index + "areaimg").addClass("interestoff");
                  $jq(".interest" + index + "areaimg").removeClass("intereston");
                  $jq(".textinterest" + index).addClass("unselected");
                  $jq(".textinterest" + index).removeClass("selected");
                  $jq(".interest" + index + "caption").hide();
                  $jq("[interest-id=" + interestid + "]").show();
                  $jq(".closebtn" + index + "place").hide();
                });
                $jq("#savebtn").click(function() {
                  var data = {
                    SkipCSSVerif: 'HTMLEditor',
                    hiddenPosition1ImageID: $jq(".interest1col").attr("interest-id"),
                    hiddenPosition2ImageID: $jq(".interest2col").attr("interest-id"),
                    hiddenPosition3ImageID: $jq(".interest3col").attr("interest-id"),
                    interesttext1: $jq(".textinterest1").val(),
                    interesttext2: $jq(".textinterest2").val(),
                    interesttext3: $jq(".textinterest3").val()
                  };
                  var startTime = new Date().getTime();
                  var url = FRONT_SITE_URL+'user/profile/SaveInterest';
                  var timeoutValue = 60000;
                  $jq.ajax({
                    type: "POST",
                    url: url,
                    data: data,
                    dataType: "json",
                    success: function(response) {
                      if (response.redirect) {
                        
                        location.href = response.redirect;
                      }
                      if (response.backTo) {
                        setTimeout("location.href=\"" + response.backTo + "\"", 2000);
                      }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                      /*if (errorThrown === 'timeout' || (jqXHR.readyState !== 0 & amp; & amp; jqXHR.status !== 0)) {
                        var endTime = new Date().getTime();
                        var duration = (endTime - startTime);
                        PeopleMedia.Popups.ShowGenericMessage(PeopleMedia.Popups.AjaxErrorMessage());
                        PeopleMedia.Logger.LogAjaxErrorXHR("Ajax request failure", url, {method: "EditInterest savebtn click", duration: duration}, jqXHR, textStatus, errorThrown, function() {
                        });
                      }*/
                    },
                    async: true,
                    cache: false,
                    timeout: timeoutValue,
                    suppressErrors: true
                  });
                });
              });

</script>
